<!-- 修改后的 allTodoList.vue -->
<template>
    <div class="map-content">
         <div class="map-info">
            <div class="map-info-content" id="gd-map-container">
              <!-- 高德地图容器 -->
              <!-- Loading效果 -->
              <div v-show="mapLoading" class="map-loading">
                <div class="loading-spinner"></div>
                <div class="loading-text">地图加载中...</div>
              </div>
            </div>
         </div>
         
         <!-- 任务人员显示组件 -->
         <TaskPeopleDisplay 
           v-if="map && taskPeople.length > 0"
           :map="map"
           :task-people="taskPeople"
           :show-info-panel="true"
           @person-click="onPersonClick"
           @person-position-updated="onPersonPositionUpdated" />
           
         <!-- 任务路线显示组件 -->
         <TaskRouteDisplay 
           v-if="map && task"
           :map="map"
           :task="task"
           :show-task-panel="true" />
    </div>
</template>

<script>
import TaskPeopleDisplay from '@/components/TaskPeopleDisplay/TaskPeopleDisplay.vue';
import TaskRouteDisplay from '@/components/TaskRouteDisplay/TaskRouteDisplay.vue';

export default {
    name: "AllTodoList",
    components: {
      TaskPeopleDisplay,
      TaskRouteDisplay
    },
    data() {
        return {
            map: null,
            mapLoading: true, // 地图加载状态
            // 道路突出显示的科技蓝配色配置
            roadHighlightStyle: {
                bgColor: '#001122',           // 深色背景
                roadMain: '#00aaff',          // 主要道路颜色（亮蓝色）
                roadSecondary: '#0088cc',     // 次要道路颜色
                roadBorder: '#00ffff',        // 道路边框（青色高亮）
                buildingColor: '#003366',     // 建筑物颜色（较暗）
                textColor: '#00ccff',         // 文字颜色
                waterColor: '#002244',        // 水域颜色
                greenColor: '#004422'         // 绿地颜色
            },
            // POI显示配置
            poiConfig: {
                showHospitals: false,          // 显示医院
                showResidential: false,        // 显示小区
                showSchools: false             // 显示学校
            },
            // 存储POI标记
            poiMarkers: {
                hospitals: [],
                residential: [],
                schools: []
            },
            //任务详情信息
            task: {
                task:'1014车有抢修任务',
                taskId:'1',
                taskStart: [108.872263,34.252474], // 添加起点坐标
                taskEnd:[108.946534,34.261359],
                taskCode:'No001',
                taskTrain:{
                    trainNo:'1014',
                    trainPosi: [
                        [108.9475, 34.2600],
                        [108.9470, 34.2605],
                        [108.9468, 34.2610],
                        [108.9466, 34.2612],
                        [108.946534, 34.261359]
                    ]
                }
            },

            // 任务人员数据
            taskPeople: [
                [
                    {
                        name: '张三',
                        lng: "108.94803",
                        lat: '34.26043',
                        status:1
                    }
                ],
                [
                    {
                        name: '张四',
                        lng: "108.94603",
                        lat: '34.25843',
                        status:2
                    }
                ],
                [
                    {
                        name: '赵连继',
                        lng: "108.94603",
                        lat: '34.25855',
                        status:1
                    }
                ]
            ]
        };
    },
    mounted() {
        this.initMap();
    },
    methods: {
        initMap() {
            this.$nextTick(() => {
                // 初始化高德地图
                this.map = new AMap.Map('gd-map-container', {
                    zoom: 12, // 适中的缩放级别
                    center: [108.94703, 34.25943], // 初始化中心点(西安)
                    pitch: 0, // 平面视角
                    viewMode: '2D',
                    showBuildingBlock: false,
                    showLabel: true
                });
                
                // 监听地图加载完成事件
                this.map.on('complete', () => {
                    this.mapLoading = false;
                    // 应用道路突出显示的科技蓝样式
                    this.applyRoadHighlightStyle();
                    
                    // 初始化POI显示
                    this.initPOIDisplay();
                });
                
                // 监听地图加载错误事件
                this.map.on('error', () => {
                    this.mapLoading = false;
                });
            });
        },
        
        // 人员点击事件处理
        onPersonClick(data) {
            console.log('点击了人员:', data.person, '索引:', data.index);
            // 可以在这里处理人员点击事件
        },
        
        // 人员位置更新事件处理
        onPersonPositionUpdated(data) {
            console.log('人员位置更新:', data.person.name, '新位置:', data.position);
            // 可以在这里处理位置更新事件
        },
        
        // 应用道路突出显示的自定义样式
        applyRoadHighlightStyle() {
            const style = this.roadHighlightStyle;
            
            // 创建突出道路的自定义地图样式
            const customStyle = [
                // 背景设置
                {
                    "featureType": "background",
                    "elementType": "all",
                    "stylers": {
                        "color": style.bgColor
                    }
                },
                // 主要道路
                {
                    "featureType": "road",
                    "elementType": "geometry.fill",
                    "stylers": {
                        "color": style.roadMain
                    }
                },
                // 道路边框（高亮效果）
                {
                    "featureType": "road",
                    "elementType": "geometry.stroke",
                    "stylers": {
                        "color": style.roadBorder,
                        "weight": "1.5" // 加粗道路边框
                    }
                },
                // 主干道
                {
                    "featureType": "road.highway",
                    "elementType": "geometry.fill",
                    "stylers": {
                        "color": style.roadMain,
                        "lightness": 10
                    }
                },
                {
                    "featureType": "road.highway",
                    "elementType": "geometry.stroke",
                    "stylers": {
                        "color": style.roadBorder,
                        "weight": "2"
                    }
                },
                // 次要道路
                {
                    "featureType": "road.arterial",
                    "elementType": "geometry.fill",
                    "stylers": {
                        "color": style.roadSecondary
                    }
                },
                {
                    "featureType": "road.arterial",
                    "elementType": "geometry.stroke",
                    "stylers": {
                        "color": style.roadBorder,
                        "weight": "1"
                    }
                },
                // 支路
                {
                    "featureType": "road.local",
                    "elementType": "geometry.fill",
                    "stylers": {
                        "color": style.roadSecondary,
                        "lightness": -10
                    }
                },
                {
                    "featureType": "road.local",
                    "elementType": "geometry.stroke",
                    "stylers": {
                        "color": style.roadBorder,
                        "weight": "0.5"
                    }
                },
                // 建筑物（调暗以突出道路）
                {
                    "featureType": "building",
                    "elementType": "all",
                    "stylers": {
                        "color": style.buildingColor,
                        "lightness": -20
                    }
                },
                // 文字标注
                {
                    "featureType": "label",
                    "elementType": "all",
                    "stylers": {
                        "color": style.textColor
                    }
                },
                // 水域
                {
                    "featureType": "water",
                    "elementType": "all",
                    "stylers": {
                        "color": style.waterColor
                    }
                },
                // 绿地（调暗以突出道路）
                {
                    "featureType": "green",
                    "elementType": "all",
                    "stylers": {
                        "color": style.greenColor,
                        "lightness": -15
                    }
                }
            ];
            
            // 应用自定义样式
            this.map.setMapStyle('amap://styles/normal');
            
            // 手动设置样式
            this.map.setFeatures(['bg', 'point', 'road', 'building']);
        },
        
        // 初始化POI显示
        initPOIDisplay() {
            // 根据配置显示各类POI
            if (this.poiConfig.showHospitals) {
                this.loadPOIs('hospital', '医院');
            }
            
            if (this.poiConfig.showResidential) {
                this.loadPOIs('residential', '小区');
            }
            
            if (this.poiConfig.showSchools) {
                this.loadPOIs('school', '学校');
            }
        },
        
        // 加载POI数据
        loadPOIs(type, keyword) {
            const that = this;
            
            // 创建POI搜索对象
            const placeSearch = new AMap.PlaceSearch({
                pageSize: 20,           // 单页显示结果条数
                pageIndex: 1,           // 页码
                city: "西安",            // 兴趣点城市
                citylimit: true,        // 是否强制限制在设置的城市内搜索
                map: this.map,          // 展现结果的地图实例
                panel: null,            // 结果列表将在此容器中进行展示
                autoFitView: true       // 是否自动调整地图视野使绘制的Marker点都处于视口的可见范围
            });
            
            // 清除之前同类型的标记
            this.clearPOIMarkers(type);
            
            // 执行搜索
            placeSearch.searchNearBy(keyword, this.map.getCenter(), 5000, (status, result) => {
                if (status === 'complete' && result.info === 'OK') {
                    // 绘制POI标记
                    that.drawPOIMarkers(type, result.poiList.pois);
                }
            });

        },
        
        // 绘制POI标记
        drawPOIMarkers(type, pois) {
            const that = this;
            
            pois.forEach(poi => {
                // 创建标记点
                const marker = new AMap.Marker({
                    position: poi.location,
                    title: poi.name,
                    map: this.map,
                    icon: this.getPOIIcon(type),  // 根据类型设置图标
                    label: {
                        content: poi.name,
                        offset: new AMap.Pixel(0, 0),
                        direction: 'top'
                    }
                });
                
                // 将标记添加到对应数组中
                this.poiMarkers[type + 's'].push(marker);
                
                // 添加点击事件
                marker.on('click', () => {
                    that.showPOIDetail(poi);
                });
            });
        },
        
        // 获取POI图标
        getPOIIcon(type) {
            // 可以根据类型返回不同的图标
            // 这里使用默认标记，实际项目中可以替换为自定义图标
            return null;
        },
        
        // 显示POI详情
        showPOIDetail(poi) {
            // 创建信息窗口
            const infoWindow = new AMap.InfoWindow({
                content: `<div class="poi-info-window">
                            <h4>${poi.name}</h4>
                            <p>地址：${poi.address || '暂无地址信息'}</p>
                            <p>类型：${poi.type || '暂无类型信息'}</p>
                          </div>`,
                offset: new AMap.Pixel(0, -30)
            });
            
            // 打开信息窗口
            infoWindow.open(this.map, poi.location);
        },
        
        // 清除POI标记
        clearPOIMarkers(type) {
            // 清除地图上的标记
            if (this.poiMarkers[type + 's'] && this.poiMarkers[type + 's'].length > 0) {
                this.poiMarkers[type + 's'].forEach(marker => {
                    this.map.remove(marker);
                });
                // 清空数组
                this.poiMarkers[type + 's'] = [];
            }
        },
        
        // 更新道路样式配置
        updateRoadStyle(newStyle) {
            this.roadHighlightStyle = { ...this.roadHighlightStyle, ...newStyle };
            if (this.map) {
                this.applyRoadHighlightStyle();
            }
        },
        
        // 更新POI显示配置
        updatePoiConfig(newConfig) {
            this.poiConfig = { ...this.poiConfig, ...newConfig };
            
            // 根据新配置更新显示
            if (this.map) {
                // 医院配置更新
                if ('showHospitals' in newConfig) {
                    if (newConfig.showHospitals) {
                        this.loadPOIs('hospital', '医院');
                    } else {
                        this.clearPOIMarkers('hospital');
                    }
                }
                
                // 小区配置更新
                if ('showResidential' in newConfig) {
                    if (newConfig.showResidential) {
                        this.loadPOIs('residential', '小区');
                    } else {
                        this.clearPOIMarkers('residential');
                    }
                }
                
                // 学校配置更新
                if ('showSchools' in newConfig) {
                    if (newConfig.showSchools) {
                        this.loadPOIs('school', '学校');
                    } else {
                        this.clearPOIMarkers('school');
                    }
                }
            }
        }
    },
};
</script>

<style scoped >
.map-content {
    width: 1920px;
    height: 1080px;
    background: url("./imgs/map-bgg.jpg");
    padding: 127px 27px 27px;
    position: relative;
}

.map-info {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
}

.map-info-content {
    width: 100%;
    height: 100%;
    position: relative;
}

/* 地图加载效果 */
.map-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 20, 40, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(0, 150, 255, 0.3);
    border-top: 5px solid #00aaff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-text {
    color: #00ccff;
    font-size: 18px;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(0, 200, 255, 0.5);
}
</style>

<style>
/* 科技蓝主题样式 */
.amap-map {
    background: #001122 !important;
}

/* POI信息窗口样式 */
.poi-info-window {
    background: rgba(0, 20, 40, 0.95);
    border: 1px solid #00aaff;
    border-radius: 8px;
    padding: 15px;
    color: #00ccff;
    min-width: 200px;
}

.poi-info-window h4 {
    margin: 0 0 10px 0;
    color: #00aaff;
    text-align: center;
}

.poi-info-window p {
    margin: 5px 0;
    font-size: 14px;
}

.poi-info-window strong {
    color: #00ffff;
}

/* 地图控件样式 */
.amap-toolbar {
    background: rgba(0, 20, 40, 0.8) !important;
    border: 1px solid #00aaff !important;
    border-radius: 4px !important;
}

.amap-toolbar .amap-toolbar-group button {
    background: rgba(0, 60, 120, 0.8) !important;
    color: #00ccff !important;
    border: 1px solid #0088cc !important;
}

.amap-toolbar .amap-toolbar-group button:hover {
    background: rgba(0, 100, 200, 0.8) !important;
}

.amap-scale-control {
    background: rgba(0, 20, 40, 0.8) !important;
    color: #00ccff !important;
    border: 1px solid #00aaff !important;
    border-radius: 4px !important;
}

.amap-marker-label {
    background: rgba(0, 100, 200, 0.8) !important;
    color: #ffffff !important;
    border: 1px solid #00aaff !important;
    border-radius: 3px !important;
    box-shadow: 0 0 5px rgba(0, 200, 255, 0.5) !important;
}
</style>